<html><head><title>MenuButton.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>MenuButton.js</h1><pre class="highlighted"><code><i>/**
 * @class Ext.SplitButton
 * @extends Ext.Button
 * A split button that provides a built-<b>in</b> dropdown arrow that can fire an event separately from the <b>default</b>
 * click event of the button.  Typically <b>this</b> would be used to display a dropdown menu that provides additional
 * options to the primary button action, but any custom handler can provide the arrowclick implementation.
 * @cfg {Function} arrowHandler A <b>function</b> called when the arrow button is clicked (can be used instead of click event)
 * @cfg {String} arrowTooltip The title attribute of the arrow
 * @constructor
 * Create a <b>new</b> menu button
 * @param {String/HTMLElement/Element} renderTo The element to append the button to
 * @param {Object} config The config object
 */</i>
Ext.SplitButton = <b>function</b>(renderTo, config){
    Ext.SplitButton.superclass.constructor.call(<b>this</b>, renderTo, config);
    <i>/**
     * @event arrowclick
     * Fires when <b>this</b> button's arrow is clicked
     * @param {SplitButton} <b>this</b>
     * @param {EventObject} e The click event
     */</i>
    <b>this</b>.addEvents({&quot;arrowclick&quot;:true});
};

Ext.extend(Ext.SplitButton, Ext.Button, {
    render : <b>function</b>(renderTo){
        <i>// <b>this</b> is one sweet looking template!</i>
        <b>var</b> tpl = <b>new</b> Ext.Template(
            <em>'&lt;table cellspacing=&quot;0&quot; class=&quot;x-btn-menu-wrap x-btn&quot;&gt;&lt;tr&gt;&lt;td&gt;'</em>,
            <em>'&lt;table cellspacing=&quot;0&quot; class=&quot;x-btn-wrap x-btn-menu-text-wrap&quot;&gt;&lt;tbody&gt;'</em>,
            <em>'&lt;tr&gt;&lt;td class=&quot;x-btn-left&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-center&quot;&gt;&lt;button class=&quot;x-btn-text&quot; type=&quot;{1}&quot;&gt;{0}&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;'</em>,
            &quot;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;td&gt;&quot;,
            <em>'&lt;table cellspacing=&quot;0&quot; class=&quot;x-btn-wrap x-btn-menu-arrow-wrap&quot;&gt;&lt;tbody&gt;'</em>,
            <em>'&lt;tr&gt;&lt;td class=&quot;x-btn-center&quot;&gt;&lt;button class=&quot;x-btn-menu-arrow-el&quot; type=&quot;button&quot;&gt;&amp;#160;&lt;/button&gt;&lt;/td&gt;&lt;td class=&quot;x-btn-right&quot;&gt;&lt;i&gt;&amp;#160;&lt;/i&gt;&lt;/td&gt;&lt;/tr&gt;'</em>,
            &quot;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;
        );
        <b>var</b> btn = tpl.append(renderTo, [<b>this</b>.text, <b>this</b>.type], true);
        <b>var</b> btnEl = btn.child(&quot;button&quot;);
        <b>if</b>(this.cls){
            btn.addClass(<b>this</b>.cls);
        }
        <b>if</b>(this.icon){
            btnEl.setStyle(<em>'background-image'</em>, <em>'url('</em> +<b>this</b>.icon +<em>')'</em>);
        }
        <b>if</b>(this.iconCls){
            btnEl.addClass(<b>this</b>.iconCls);
            <b>if</b>(!<b>this</b>.cls){
                btn.addClass(<b>this</b>.text ? <em>'x-btn-text-icon'</em> : <em>'x-btn-icon'</em>);
            }
        }
        <b>this</b>.el = btn;
        <b>if</b>(this.handleMouseEvents){
            btn.on(&quot;mouseover&quot;, <b>this</b>.onMouseOver, <b>this</b>);
            btn.on(&quot;mouseout&quot;, <b>this</b>.onMouseOut, <b>this</b>);
            btn.on(&quot;mousedown&quot;, <b>this</b>.onMouseDown, <b>this</b>);
            btn.on(&quot;mouseup&quot;, <b>this</b>.onMouseUp, <b>this</b>);
        }
        btn.on(<b>this</b>.clickEvent, <b>this</b>.onClick, <b>this</b>);
        <b>if</b>(this.tooltip){
            <b>if</b>(typeof <b>this</b>.tooltip == <em>'object'</em>){
                Ext.QuickTips.tips(Ext.apply({
                      target: btnEl.id
                }, <b>this</b>.tooltip));
            } <b>else</b> {
                btnEl.dom[<b>this</b>.tooltipType] = <b>this</b>.tooltip;
            }
        }
        <b>if</b>(this.arrowTooltip){
            btn.child(&quot;button:nth(2)&quot;).dom[<b>this</b>.tooltipType] = <b>this</b>.arrowTooltip;
        }
        <b>if</b>(this.hidden){
            <b>this</b>.hide();
        }
        <b>if</b>(this.disabled){
            <b>this</b>.disable();
        }
        <b>if</b>(this.pressed){
            <b>this</b>.el.addClass(&quot;x-btn-pressed&quot;);
        }
        <b>if</b>(Ext.isIE &amp;&amp; !Ext.isIE7){
            <b>this</b>.autoWidth.defer(1, <b>this</b>);
        }<b>else</b>{
            <b>this</b>.autoWidth();
        }
        <b>if</b>(this.menu){
            <b>this</b>.menu.on(&quot;show&quot;, <b>this</b>.onMenuShow, <b>this</b>);
            <b>this</b>.menu.on(&quot;hide&quot;, <b>this</b>.onMenuHide, <b>this</b>);
        }
    },

    <i>// private</i>
    autoWidth : <b>function</b>(){
        <b>if</b>(this.el){
            <b>var</b> tbl = <b>this</b>.el.child(&quot;table:first&quot;);
            <b>var</b> tbl2 = <b>this</b>.el.child(&quot;table:last&quot;);
            <b>this</b>.el.setWidth(&quot;auto&quot;);
            tbl.setWidth(&quot;auto&quot;);
            <b>if</b>(Ext.isIE7 &amp;&amp; Ext.isStrict){
                <b>var</b> ib = <b>this</b>.el.child(<em>'button:first'</em>);
                <b>if</b>(ib &amp;&amp; ib.getWidth() &gt; 20){
                    ib.clip();
                    ib.setWidth(Ext.util.TextMetrics.measure(ib, <b>this</b>.text).width+ib.getFrameWidth(<em>'lr'</em>));
                }
            }
            <b>if</b>(this.minWidth){
                <b>if</b>(this.hidden){
                    <b>this</b>.el.beginMeasure();
                }
                <b>if</b>((tbl.getWidth()+tbl2.getWidth()) &lt; <b>this</b>.minWidth){
                    tbl.setWidth(<b>this</b>.minWidth-tbl2.getWidth());
                }
                <b>if</b>(this.hidden){
                    <b>this</b>.el.endMeasure();
                }
            }
            <b>this</b>.el.setWidth(tbl.getWidth()+tbl2.getWidth());
        } 
    },
    <i>/**
     * Sets <b>this</b> button's click handler
     * @param {Function} handler The <b>function</b> to call when the button is clicked
     * @param {Object} scope (optional) Scope <b>for</b> the <b>function</b> passed above
     */</i>
    setHandler : <b>function</b>(handler, scope){
        <b>this</b>.handler = handler;
        <b>this</b>.scope = scope;  
    },
    
    <i>/**
     * Sets <b>this</b> button's arrow click handler
     * @param {Function} handler The <b>function</b> to call when the arrow is clicked
     * @param {Object} scope (optional) Scope <b>for</b> the <b>function</b> passed above
     */</i>
    setArrowHandler : <b>function</b>(handler, scope){
        <b>this</b>.arrowHandler = handler;
        <b>this</b>.scope = scope;  
    },
    
    <i>/**
     * Focus the button
     */</i>
    focus : <b>function</b>(){
        <b>if</b>(this.el){
            <b>this</b>.el.child(&quot;button:first&quot;).focus();
        }
    },

    <i>// private</i>
    onClick : <b>function</b>(e){
        e.preventDefault();
        <b>if</b>(!<b>this</b>.disabled){
            <b>if</b>(e.getTarget(&quot;.x-btn-menu-arrow-wrap&quot;)){
                <b>if</b>(this.menu &amp;&amp; !<b>this</b>.menu.isVisible()){
                    <b>this</b>.menu.show(<b>this</b>.el, <b>this</b>.menuAlign);
                }
                <b>this</b>.fireEvent(&quot;arrowclick&quot;, <b>this</b>, e);
                <b>if</b>(this.arrowHandler){
                    <b>this</b>.arrowHandler.call(<b>this</b>.scope || <b>this</b>, <b>this</b>, e);
                }
            }<b>else</b>{
                <b>this</b>.fireEvent(&quot;click&quot;, <b>this</b>, e);
                <b>if</b>(this.handler){
                    <b>this</b>.handler.call(<b>this</b>.scope || <b>this</b>, <b>this</b>, e);
                }
            }
        }
    },
    <i>// private</i>
    onMouseDown : <b>function</b>(e){
        <b>if</b>(!<b>this</b>.disabled){
            Ext.fly(e.getTarget(&quot;table&quot;)).addClass(&quot;x-btn-click&quot;);
        }
    },
    <i>// private</i>
    onMouseUp : <b>function</b>(e){
        Ext.fly(e.getTarget(&quot;table&quot;)).removeClass(&quot;x-btn-click&quot;);
    }   
});

<i>// backwards compat</i>
Ext.MenuButton = Ext.SplitButton;</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
    </body></html>